<script setup>
import {
  listQuestionnaire,
  getQuestionnaire,
  delQuestionnaire,
  addQuestionnaire,
  updateQuestionnaire,
} from '@/api/system/questionnaire'
import { reactive } from 'vue'

const { proxy } = getCurrentInstance()

const formRef = ref(null)
//
// 列表数据
const tableData = ref([])

const formValue = ref({})

const questionnaireList = ref([])

const selectForm = ref([
  { type: '日期范围' },
  { label: '预约人', type: '输入框', model: 'reservationName' },
  { label: '状态', type: '下拉单选', model: 'state', opt: [] },
])

// 按钮枚举
const buttonList = ref([
  { label: '新增', type: 'add' },
  { label: '删除', type: 'remove' },
  { label: '预览', type: '审核' },
])

// 列表枚举
const column = ref([
  { label: '调查内容', prop: 'itemText' },
  { label: '默认选项为“是”', prop: 'answer' },
  // { label: '默认值', prop: 'path' },
  { label: '创建时间', prop: 'createTime' },
  { label: '创建人', prop: 'createBy' },
  { label: '操作', prop: 'x', width: '240' },
])

// state
const state = reactive({
  title: '新增',
  total: 0, // 列表总数
  loading: false,
})

// 表单校验
const rules = reactive({
  itemText: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  url: [{ required: true, message: '请上传图片', trigger: 'change' }],
  // path: [{ required: true, message: '请填写跳转地址', trigger: 'blur' }],
})

// 新增
const add = async () => {
  state.title = '新增'
  state.isShow = true
}

// 修改
const edit = async (id) => {
  try {
    const { data: result } = await getQuestionnaire(id)
    formValue.value = result
    state.title = '修改'
    state.isShow = true
  } catch {
  } finally {
  }
}

// 删除
const remove = async (ids) => {
  const is = await proxy.DelMessageBox('是否确认删除该轮播图？')
  if (!is) return
  await delQuestionnaire(ids)
  getList()
  proxy.successMsg('删除成功!')
}

// 查看
const look = async (id) => {
  try {
    const { data: result } = await getQuestionnaire(id)
    formValue.value = result
    state.title = '查看'
    state.disabled = true
    state.isShow = true
  } catch {
  } finally {
  }
}

// 新增提交
const addSub = async () => {
  const validate = await formRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    await addQuestionnaire(formValue.value)
    close()
    getList()
    proxy.successMsg('新增成功!')
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 修改提交
const editSub = async () => {
  const validate = await formRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    await updateQuestionnaire(formValue.value)
    getList()
    close()
    proxy.successMsg('修改成功!')
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 修改默认值
const beforeChange = async (val) => {
  const is = await proxy.DelMessageBox('是否确认修改默认勾选值？')
  if (!is) return (val.answer = val.answer == 1 ? '2' : '1')
  try {
    await updateQuestionnaire({
      id: val.id,
      answer: val.answer,
    })
    proxy.successMsg('修改成功!')
    getList()
  } catch {
  } finally {
  }
}

// 关闭
const close = () => {
  formValue.value = {}
  state.isShow = false
  state.disabled = false
}

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 查询提交
const selectSubmit = (obj) => {
  Object.keys(obj).forEach((t) => (query[t] = obj[t]))
  getList()
}

// 查询列表
const getList = async () => {
  state.loading = true
  try {
    const result = await listQuestionnaire(query)
    tableData.value = result.rows
    state.total = result.total
  } catch {
  } finally {
    state.loading = false
  }
}
getList()

// 查询列表
const getQuestionnaireList = async () => {
  try {
    proxy.$modal.loading('请稍后...')
    const result = await listQuestionnaire({
      pageNum: 1,
      pageSize: 999,
    })
    questionnaireList.value = result.rows
    state.questionnaireShow = true
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}
</script>

<template>
  <div class="app-container">
    <!-- <x-select-form :selectForm="selectForm" @selectSubmit="selectSubmit" /> -->
    <x-button
      :list="buttonList"
      @add="add"
      @edit="edit"
      @remove="remove"
      @examine="getQuestionnaireList"
    />

    <x-table
      keyId="id"
      :isSel="false"
      :loading="state.loading"
      :column="column"
      :data="tableData"
      :total="state.total"
      v-model:page="query.pageNum"
      v-model:limit="query.pageSize"
      @pagination="getList"
    >
      <template #columnCell="{ column, record }">
        <el-switch
          active-value="1"
          inactive-value="2"
          v-if="column.prop == 'answer'"
          v-model="record.answer"
          @click="beforeChange(record)"
        />
        <div v-if="column.prop == 'x'" class="operate">
          <el-link icon="Edit" type="primary" @click="edit(record.id)"
            >修改</el-link
          >
          <el-link icon="DeleteFilled" type="danger" @click="remove(record.id)"
            >删除</el-link
          >
          <el-link icon="Search" type="primary" @click="look(record.id)"
            >查看</el-link
          >
        </div>
      </template>
    </x-table>
    <!-- 添加或修改轮播图对话框 -->
    <x-dialog
      width="500px"
      :loading="state.btnLoading"
      :title="state.title"
      v-model="state.isShow"
      @ok="state.title == '新增' ? addSub() : editSub()"
      @close="close"
    >
      <el-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="调查内容" prop="itemText">
          <el-input
            :rows="5"
            type="textarea"
            clearable
            :disabled="state.disabled"
            v-model="formValue.itemText"
            placeholder="请输入调查内容"
          />
        </el-form-item>
        <el-form-item label="默认值">
          <el-switch
            :disabled="state.disabled"
            active-value="1"
            inactive-value="2"
            v-model="formValue.answer"
          />
        </el-form-item>
      </el-form>
    </x-dialog>

    <!-- 预览调查问卷 -->
    <x-dialog
      width="50rem"
      :title="`预览调查问卷`"
      okText="确认"
      v-model="state.questionnaireShow"
      @ok="state.questionnaireShow = false"
      @close="state.questionnaireShow = false"
    >
      <div
        class="questionnaireItem"
        v-for="(t, ind) in questionnaireList"
        :key="t.id"
      >
        <div class="itemBiaoti">
          <span>{{ ind + 1 }}、</span>
          <span> {{ t.itemText }}</span>
        </div>
        <div class="itemDaan">
          <el-checkbox :checked="t.answer == '1'" disabled />
          <el-checkbox :checked="t.answer == '2'" disabled />
        </div>
      </div>
    </x-dialog>
  </div>
</template>

<style lang="scss" scoped>
.questionnaireItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  .itemBiaoti {
    font-weight: 700;
  }
  .itemDaan {
    text-align: right;
    width: 180px;
  }
}
</style>
